<template>
  <div class="about">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>主页</el-breadcrumb-item>
      <el-breadcrumb-item style="font-weight: 700; color: #515a6e"
        >视频管理</el-breadcrumb-item
      ><br />
      <el-card class="box-card">
        <el-row>
          <el-button type="primary" @click="dialogFormVisible = true"
            >上传视频</el-button
          >
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="">
              <el-input v-model="search" placeholder="关键字"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getList">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <div class="form">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            :header-cell-style="getRowClass"
          >
            <el-table-column prop="cover" label="封面" width="180">
              <template slot-scope="scope">
                <img :src="scope.row.cover" alt="" width="100%" />
              </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" width="180">
            </el-table-column>
            <el-table-column prop="seconds" label="时长">
              <template slot-scope="scope">
                {{ getCtime(scope.row.ctime) }}
              </template>
            </el-table-column>
            <el-table-column prop="credit" label="学分"> </el-table-column>
            <el-table-column prop="ctime" label="创建时间">
              <template slot-scope="scope">
                {{ scope.row.ctime.substring(0, 10) }}
                {{ scope.row.ctime.substring(11, 19) }}
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              align="center"
              label="操作"
              width="200"
            >
              <template slot-scope="aaa">
                <el-button
                  @click="editList(aaa.row)"
                  type="primary"
                  size="small"
                  icon="el-icon-search"
                  >编辑</el-button
                >
                <el-button
                  @click="del(aaa.row)"
                  type="danger"
                  size="small"
                  icon="el-icon-delete"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>
    </el-breadcrumb>
    <!-- 上传视频 -->
    <el-dialog title="上传视频" :visible.sync="dialogFormVisible">
      <el-form v-model="uploadForm">
        <el-form-item label="视频标题" :label-width="formLabelWidth">
          <el-input
            v-model="uploadForm.title"
            autocomplete="off"
            placeholder="请输入视频标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="视频链接" :label-width="formLabelWidth">
          <el-input
            v-model="uploadForm.video"
            autocomplete="off"
            placeholder="请输入视频链接"
          ></el-input>
        </el-form-item>
        <el-form-item label="视频长度" :label-width="formLabelWidth">
          <el-input
            v-model="uploadForm.seconds"
            autocomplete="off"
            placeholder="请输入视频长度"
          ></el-input>
        </el-form-item>
        <el-form-item label="学分数" :label-width="formLabelWidth">
          <el-input
            v-model="uploadForm.credit"
            autocomplete="off"
            placeholder="请输入学分数"
          ></el-input>
        </el-form-item>
        <el-form-item label="课程类型" :label-width="formLabelWidth">
          <el-radio-group v-model="uploadForm.isElective">
            <el-radio :label="number1" :value="0">必修课</el-radio>
            <el-radio :label="number2" :value="1">选修课</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div class="upload">
        <h4 class="shangchuan">上传封面</h4>
        <el-upload
          class="upload-demo"
          action="http://vlearn2206b.daweilab.com/uploader/oss"
          :on-success="handlePicture"
          :file-list="fileList"
          list-type="picture"
        >
          <el-button size="small" type="primary" width="100" class="box4">
            <i class="el-icon-date" width="100">
              <span>上传视频</span>
            </i>
          </el-button>
        </el-upload>
      </div>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialogFormVisible = false;
            upload();
          "
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 上传视频 -->
  </div>
</template>

<script>
import { getList, deleteList, addList, editvideo } from "@/api/video.js";

export default {
  name: "VideoView",
  data() {
    return {
      formInline: {
        user: "",
      },
      number1: 0,
      number2: 1,
      page: 0,
      size: 10,
      tableData: [],
      total: 100,
      search: "",
      uploadForm: [],
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      radio: "1",
      fileList: [],

      dialogImageUrl: "",
    };
  },

  created() {
    this.getList();
  },
    //监听属性，监听页面数据发生变化，
  watch: {
    search(search) {
      this.getList(search);
      if (!search) {
        this.videos;
        return;
      }
    },
  },
  methods: {
    async getList() {
      const ruleForm = {
        _orderd: "recommend,ctime",
        _page: this.page,
        _size: this.size,
        // _search:this.search,
      };
      //搜索
      if (this.search) {
        ruleForm._search = this.search;
        const res = await getList(ruleForm);
        if (res.code === 1) {
          console.log(res);
          this.tableData = res.list;
          this.total = res.pager.total;
        }
      }
      const res = await getList(ruleForm);
      if (res.code === 1) {
        console.log(res);
        this.tableData = res.list;
        this.total = res.pager.total;
      }
    },
    handleSizeChange(page) {
      this.size = page;
      this.getList();
    },
    handleCurrentChange(size) {
      this.page = size;
      this.getList();
    },
    //删除项，handleDel（）是点击事件
    async del(obj) {
      console.log(obj);
      const confirmBtn = {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      };
      const confirmRes = await this.$confirm(
        `确定要删除标题为 【${obj.title}】 学分名称是【${obj.credit}】 的数据吗, 是否继续?`,
        "提示",
        confirmBtn
      );
      if (confirmRes) {
        const e = {
          id: obj.id,
        };
        const delRes = await deleteList(e);
        if (delRes && delRes.code == 1) {
          this.getList();
          this.$message({
            type: "success",
            message: "删除成功",
          });
        }
      } else {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      }
    },
    // watch: {

    // },
    //上传视频
    upload() {
      const s = {
        cover: this.dialogImageUrl,
        credit: this.uploadForm.credit,
        http: "",
        radio: this.uploadForm.radio,
        seconds: this.uploadForm.seconds,
        title: this.uploadForm.title,
        video: this.uploadForm.video,
      };
      if (this.edit) {
        this.edit = false;
        editvideo(s, this.id);
      } else {
        addList(s);
      }
      this.uploadForm = [];
      this.dialogImageUrl = "";
      this.getList();
      this.dialogVisible = false;
    },
    editList(row) {
      (this.uploadForm = row),
        (this.id = this.uploadForm.id),
        (this.dialogImageUrl = this.uploadForm.cover),
        (this.dialogFormVisible = true),
        (this.edit = true);
    },

    // 处理时间
    getCtime(cTime) {
      const time = Date.parse(cTime);
      var date = new Date(time);
      var YY = date.getFullYear() + "-";
      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hh =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var mm =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var ss =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return YY + MM + DD + " " + hh + mm + ss;
    },

    //设置表头背景颜色
    getRowClass() {
      return "background: #F8F8F9;border:#black;color:515A6E;";
    },

    handlePicture(response) {
      const res = { ...response.files };
      console.log(res);
      this.dialogImageUrl = res[0].url;
      this.dialogVisible = true;
    },
    handlePreview(file) {
      console.log(file);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-breadcrumb .el-card {
  margin-top: 30px;
  // height: 100%;
}

.el-card .el-row .el-button {
  float: left;
}

.el-card .el-row .el-form {
  float: right;
}

.block {
  margin-top: 20px;
  width: 400px;
  height: 50px;
}
.radio-left {
  float: left;
  margin-top: 15px;
}
.radio-right {
  float: left;
  margin-top: 15px;
}
.shangchuan {
  text-align: left;
  margin-left: 50px;
}
.box4 {
  position: relative;
  left: 40px;
  top: 40px;
}
</style>